<template>
    <van-field v-model="localValue" name="captchaCode" placeholder="请输入验证码" center
               :rules="[{ required: true, message: '短信验证码不能为空' },
                        { pattern: /^\d{6}$/, message: '短信验证码应为6位数字' }]">
        <template #button>
            <van-count-down class="captcha-count-down" :time="time" format="ss秒后重发"
                            @finish="$emit('finish')" v-if="sending"/>
            <van-button size="small" type="primary" native-type="button"
                        :loading="loading" @click.stop="$emit('send')" v-else>
                发送验证码
            </van-button>
        </template>
    </van-field>
</template>

<script>
  import { Button, CountDown, Field } from "vant"

  export default {
    name: "SmsCaptchaField",
    components: {
      [Button.name]: Button,
      [CountDown.name]: CountDown,
      [Field.name]: Field,
    },
    model: {
      prop: "value",
      event: "change",
    },
    props: {
      loading: Boolean,
      value: String,
      time: [String, Number],
      sending: Boolean,
    },
    computed: {
      localValue: {
        get() {
          return this.value
        },
        set(value) {
          this.$emit("change", value)
        },
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .captcha-count-down {
        font-size: 13px;
        color: $gray-6;
    }
</style>
